<template>
  <section id="categories" class="py-16 md:py-24 bg-white">
    <div class="container mx-auto px-4">
      <!-- 标题区域 - 滚动动画 -->
      <div class="text-center mb-16 scroll-animate">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary mb-4">拍品分类</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">
          根据不同品类快速筛选，精准找到您感兴趣的艺术品
        </p>
      </div>

      <!-- 分类列表 - 带交错动画和悬停效果 -->
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 md:gap-6">
        <router-link
          :to="`/category/${category.id}`"
          class="bg-neutral rounded-xl p-6 text-center hover-lift transition-all duration-500 scroll-animate group relative overflow-hidden"
          v-for="(category, index) in categories"
          :key="category.id"
          :style="{ animationDelay: `${index * 0.1}s` }"
        >
          <!-- 背景扩散动画 -->
          <div
            class="absolute inset-0 bg-primary/5 scale-0 group-hover:scale-100 transition-transform duration-700 origin-center rounded-xl"
          ></div>

          <!-- 图标容器 - 保持主色，添加缩放和旋转动画 -->
          <div
            class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl mx-auto mb-4 transition-all duration-500 group-hover:bg-primary/20 transform group-hover:scale-110 group-hover:rotate-6"
          >
            <i
              :class="category.icon"
              class="transition-transform duration-500 group-hover:rotate-[-6deg]"
            ></i>
          </div>

          <!-- 分类名称 - 添加上移动画 -->
          <h3
            class="font-medium group-hover:text-primary transition-colors duration-300 relative z-10 transform group-hover:-translate-y-1 transition-transform duration-300"
          >
            {{ category.name }}
          </h3>

          <!-- 数量文本 - 添加淡入和上移动画 -->
          <p
            class="text-xs text-gray-500 mt-1 transition-all duration-300 group-hover:text-primary/90 relative z-10 transform group-hover:-translate-y-1 opacity-70 group-hover:opacity-100"
          >
            {{ category.itemsCount }}件
          </p>

          <!-- 底部装饰条动画 -->
          <div
            class="absolute -bottom-1 left-0 right-0 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"
          ></div>

          <!-- 右上角装饰元素动画 -->
          <div
            class="absolute top-2 right-2 w-3 h-3 bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0"
          ></div>
        </router-link>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 分类数据 - 已修正图标
const categories = ref([
  { id: 'painting', name: '书画', icon: 'fa fa-paint-brush', itemsCount: 1246 },
  { id: 'porcelain', name: '瓷器', icon: 'fa fa-envira', itemsCount: 852 },
  { id: 'jade', name: '玉器', icon: 'fa fa-gem', itemsCount: 638 }, // 玉器使用宝石图标
  { id: 'jewelry', name: '珠宝', icon: 'fa fa-ring', itemsCount: 425 }, // 珠宝使用戒指图标
  { id: 'watch', name: '钟表', icon: 'fa fa-clock', itemsCount: 318 }, // 钟表使用时钟图标
  { id: 'misc', name: '杂项', icon: 'fa fa-random', itemsCount: 742 },
])

// 滚动动画观察器
const setupScrollAnimations = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1 }
  )

  document.querySelectorAll('.scroll-animate').forEach((el) => {
    observer.observe(el)
  })
}

onMounted(() => {
  setupScrollAnimations()
})
</script>

<style scoped>
/* 滚动进入动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 悬停提升效果 */
.hover-lift {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 20px -10px rgba(26, 54, 93, 0.15);
}
</style>
